<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="牌照信息" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                   labelWidth="auto">
          <uni-forms-item label="车牌号:" name="carNo" :required="boole">
            <text class="carNo"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.carNo" placeholder="请输入车牌号"/>
            <text v-else> {{ ruleForm.carNo || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="上牌时间:" name="licensePlateTime" :required="boole">
            <text class="licensePlateTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择上牌时间"
                                 return-type="string" v-model="ruleForm.licensePlateTime"/>
            <text v-else> {{ ruleForm.licensePlateTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆类型:" name="carType" :required="boole">
            <text class="registerPrice"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.carType" :localdata="dict.type.car_type"
                                 dataKey="label" dataValue="value"
                                 placeholder="请选择车辆类型"
                                 :clear="true" filterable/>
            <text v-else> {{ handleLabel(dict.type.car_type, ruleForm.carType) }}</text>
          </uni-forms-item>

          <uni-forms-item label="登记时间:" name="issuanceDate" :required="boole">
            <text class="issuanceDate"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择登记时间"
                                 return-type="string" v-model="ruleForm.issuanceDate"/>
            <text v-else> {{ ruleForm.issuanceDate || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item name="registerUrl" label="车辆登记证:" :required="boole">
            <text class="registerUrl"/>
            <image-common :disabled="!boole" :up-type="0" :li-mit="1" v-model="ruleForm.registerUrl"/>
            <button v-if="boole" class="uni-button" size="mini" type="primary" @click="handleClick('dj')">OCR识别
            </button>
          </uni-forms-item>

          <uni-forms-item name="driveBookUrl" label="行驶本:" :required="boole">
            <text class="driveBookUrl"/>
            <image-common :disabled="!boole" :up-type="0" :li-mit="1" v-model="ruleForm.driveBookUrl"/>
            <button v-if="boole" class="uni-button" size="mini" type="primary" @click="handleClick('xs')">OCR识别
            </button>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>
import {uploadDriverLicense, getVehicleRegistrationCertificate} from "@/api/upCard";

export default {
  name: 'licensePlate',//牌照信息
  dicts: ["car_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {
    "ruleForm.registerUrl": {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate(['registerUrl'])
        }
      },
      deep: true,
    },
    "ruleForm.driveBookUrl": {
      handler(val) {
        if (val) {
          this.$refs.ruleForm.clearValidate(['driveBookUrl'])
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      rules: {
        carNo: {
          rules: [
            {
              required: true,
              errorMessage: "请输入车牌号",
              validateTrigger: "blur",
            },
          ],
        },
        licensePlateTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择上牌时间",
              validateTrigger: "bind",
            },
          ],
        },
        carType: {
          rules: [
            {
              required: true,
              errorMessage: "请选择车辆类型",
              validateTrigger: "bind",
            },
          ],
        },
        issuanceDate: {
          rules: [
            {
              required: true,
              errorMessage: "请选择登记时间",
              validateTrigger: "bind",
            },
          ],
        },
        registerUrl: {
          rules: [
            {
              required: true,
              errorMessage: "上传车辆登记证",
              validateTrigger: "bind",
            },
          ],
        },
        driveBookUrl: {
          rules: [
            {
              required: true,
              errorMessage: "上传行驶本",
              validateTrigger: "bind",
            },
          ],
        },
      }
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClick(str) {
      if (str === "xs") {
        this.uploadDriverLicense(this.ruleForm.driveBookUrl);
      }
      if (str === "dj") {
        this.handleRegistration(this.ruleForm.registerUrl);
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
            .validate()
            .then((res) => {
              resolve();
            })
            .catch((err) => {
              let key = ".flex-col" + ">>>" + "." + err[0].key;
              reject(key);
            });
      });
    },

    async uploadDriverLicense(id) {
      if (!id) {
        this.$modal.msgError('请先上传')
        return
      }
      try {
        const res = await uploadDriverLicense(id);
        this.value.carNo = this.ruleForm.carNo = res.data.licensePlateNum;
        this.value.licensePlateTime = this.ruleForm.licensePlateTime = res.data.registerTime;
        let obj = this.dict.type.car_type.find(a=>a.label ===  res.data.carType)
        this.value.carType = this.ruleForm.carType = obj?.value || '';
      } catch (e) {
        this.value.carNo = this.ruleForm.carNo = "";
        this.value.licensePlateTime = this.ruleForm.licensePlateTime = "";
        this.value.carType = this.ruleForm.carType = "";
      }
    },

    async handleRegistration(id) {
      if (!id) {
        this.$modal.msgError('请先上传')
        return
      }
      try {
        const res = await getVehicleRegistrationCertificate(id);
        this.value.issuanceDate = this.ruleForm.issuanceDate = res.data.registrationDate;
      } catch (e) {
        console.error(e);
        this.value.issuanceDate = this.ruleForm.issuanceDate = ""
      }
    },
  },
};
</script>

<style scoped lang=""></style>


